{extend name="base" /}
{block name="style"}
<style>
    .date{ color:#333; }
    h1{ font-size: 60px; margin:0;}
    h3{ margin:10px 0;; }
    h4{ margin-top:0; }
    .reset-block{line-height: 22px;}
    .reset-block h3{ font-weight: bold; }
    .header-news{ margin-bottom: 20px; }
    .header-news p{ font-size: 13px; }

    .reset-col-sm-4{ width:35.8%; }
    .reset-col-sm-8{ width:64.2%; }
    .header-news-date{ margin:0; }
    .news-desc{ color:#555; }
    .news-desc:hover,.news-desc:focus{ color:#555!important; }
    .news-desc p{ font-size: 13px; }
    .news-list>li{border-bottom: 1px dashed #BDBDBD;padding:15px 0;}
    .news-list>li:hover{ background: #eee; }
    .reset-col-xs-l{ padding-left: 15px;padding-right: 15px; float: left; width:15%; }
    .reset-col-xs-m{ padding-left: 15px;padding-right: 15px; float: left; width:75%; }
    .reset-col-xs-r{ padding-left: 15px;padding-right: 15px; float: left; width:10%; }
    .click-more{ width:100%; color:#666; margin:30px 0; height:40px;line-height: 40px;border-radius: 2px;}
    .click-more:hover{ color:#555; }

    .more{ display: inline-block; background: #3C3EAB;color:#fff;height:28px;line-height: 28px;border-radius: 28px; font-size: 15px;padding:0 20px;}
    .more:hover{ color:#fff; }
    @media (max-width: 1200px) {
        .header-news h3{ margin:5px 0; }
        .header-news .header-news-date{ margin:0; }
        h3{ font-size: 18px; }
        .reset-block{line-height: 18px;}
    }
    @media (max-width: 767px) {
        .reset-block{line-height: 18px;}
        .header-news .header-news-date{ margin:0; margin-top:10px ; }
        h1{ font-size: 50px; margin-top: 15px; }
        h3{ font-size: 15px; }
        h4{font-size: 17px; }
        .reset-col-xs-l{ width:25%;}
        .reset-col-xs-r{width:0;}
        .news-list>li{ padding:0; }
        .header-news h3{ margin:10px 0;}
        .col-xs-12{ width:100%; }
        .col-xs-12 .img-responsive{ margin: 0 auto; }
    }
</style>
{/block}
{block name="content"}
<section id="banner">
    <div class="banner-box">
        <img src="/assets/img/banner.png" >
    </div>
    <div class="detail detail-path hidden-xs">
        <div class="container">
            <div class="detail-home">
                <a href="javascript:void(0)">
                    <img src="/assets/img/home.png" />
                </a>
                <a href="../news/news-main.html" id="main-title">新闻中心</a>&gt;
                <a href="../news/news-main.html" id="sub-title">{$menu.name}</a>
            </div>
            <ul class="list-inline detail-title" id="detail-title">
                {volist name="postMenus" id="vo"}
                <li {if condition="$menu.id eq $vo.id"}class="current"{/if}>
                    <a href="/post/{$vo.id}">{$vo.name}</a>
                </li>
                {/volist}
                <span id="subline"></span>
            </ul>
        </div>
    </div>
</section>
<section class="main">
    <div class="container">
        <div class="row">
            <div class="reset-col-sm-9 col-xs-12 reset-block">
                <div class="row">
                    <!-- 左侧头部-->
                    {if condition="$t"}
                    <div class="col-xs-12">
                        <div class="row header-news">
                            <div class="col-xs-12 reset-col-sm-4">
                                <img class="img-responsive" src="{$t.poster}" alt=""/>
                            </div>
                            <div class="col-xs-12 reset-col-sm-8">
                                <h3 class="header-news-date">{$t.create_time|date="Y/m/d",###}</h3>
                                <h3>{$t.title}</h3>
                                <p>
                                    {$t.description}...
                                </p>
                                <a href="/post/detail/{$t.id}" class="more">了解更多</a>
                            </div>
                        </div>
                    </div>
                    {/if}
                    <!-- 左侧列表-->
                    <div class="col-xs-12">
                        <ul class="news-list">
                            {volist name="posts->items()" id="vo"}
                            <li>
                                <div class="row">
                                    <div class="reset-col-xs-l  text-center">
                                        <h1 class="date">{$vo.create_time|date="d",###}</h1>
                                        <h4 class="year-month">{$vo.create_time|date="Y-m",###}</h4>
                                    </div>
                                    <div class="reset-col-xs-m ">
                                        <a href="/post/detail/{$vo.id}" class="news-desc">
                                            <h3>{$vo.title}</h3>
                                            <p>{$vo.description}...</p>
                                        </a>
                                    </div>
                                    <div class="reset-col-xs-r "></div>
                                </div>
                            </li>
                            {/volist}
                        </ul>
                        {if condition="$posts->items()"}
                        <button class="reset-btn click-more">点击更多</button>
                        {/if}
                    </div>
                </div>
            </div>
            <div class="reset-col-sm-3 col-xs-12">
                <div class="row">
                    <div class="col-md-12 col-xs-6">
                        <div class="reset-img-box">
                            <img class="img-responsive center-block" src="/assets/img/side-bg01.png">
                            <a href="javascript:void(0)" class="reset-label text-center">代建管理项目</a>
                        </div>
                    </div>
                    <div class="col-md-12 col-xs-6">
                        <div class="reset-img-box">
                            <img class="img-responsive center-block" src="/assets/img/side-bg02.png">
                            <a href="javascript:void(0)" class="reset-label text-center">酒店管理项目</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{/block}
{block name="script"}
{/block}